<template>
  <div>
    <loginLogo/>
    <div class="login">
      <div class="login-head">
        <span>用户登录</span>
      </div>
      <el-form ref="loginForm" :model="loginForm" label-width="80px" :rules="rules">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button @click="goSignUp">注册</el-button>
          <el-button type="primary" @click="handleLoginIn">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import loginLogo from '../components/LoginLogo'
  import {mixin} from '../mixins'
  import {loginIn} from '../api/index'
  export default {
    name: 'LoginIn',
    mixins:[mixin],
    components:{
      loginLogo
    },
    data(){
      return{
        loginForm: {
          username: '',       //用户名
          password: '',       //密码
          sex: '',            //性别
          phoneNum: '',       //手机
          email: '',          //邮箱
          birth: '',          //生日
          introduction: '',   //签名
          location: ''       //地区
        },
        rules: {
          username: [
            { required: true, trigger: 'blur',message:'请输入用户名' }
          ],
          password: [
            { required: true, trigger: 'blur',message:'请输入密码' }
          ],
        }               //表单提交的规则
      }
    },
    methods:{
      goSignUp(){
        this.changeIndex('注册')
        this.$router.push({path:'/sign-up'})
      },
      handleLoginIn(){
        let _this = this;
        let params = new URLSearchParams();
        params.append('username',this.loginForm.username);
        params.append('password',this.loginForm.password);
        loginIn(params)
          .then(res => {
            if(res.code == 1){
              _this.notify('登录成功','success');
              _this.$store.commit('setLoginIn',true)
              _this.$store.commit('setUserId',res.userMsg.id);
              _this.$store.commit('setUsername',res.userMsg.username);
              _this.$store.commit('setAvator',res.userMsg.avator);
              setTimeout(function(){
                _this.changeIndex('首页')
                _this.$router.push({path: '/'});
              },2000);
            }else{
              _this.notify('用户名或密码错误','error');
            }
          })
          .catch(err => {
            _this.notify('用户名或密码错误','error');
          })
      },
      changeIndex(value){
        this.$store.commit('setActiveName',value)
      }
    }
  }
</script>

<style scoped lang="scss">
@import "../assets/css/login-in.scss";
</style>
